<template>
  <!-- 变更记录 -->
  <div>
    <!-- <div class="top-btn-group">
      <el-button type="primary" size="mini" @click="handleSave">保存</el-button>
      <el-button size="mini" @click="handleBack">取消</el-button>
    </div> -->
    <div>
      <table-box
        ref="refTable"
        :selected-arry.sync="tableSelected"
        :table-config="tableConfig"
        :data="tableData"
        :off-set="-20"
        show-index
        @btnOperate="btnOperate"
      />
      <el-dialog
        ref="refDlg"
        title="新增"
        :visible.sync="dlgVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :before-close="closeDialog"
        width="700px"
        @close="closeDialog"
      >
        <el-form ref="refForm" class="financeForm" :rules="formRules" :model="formData" size="mini" label-width="90px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="签约日期:" prop="signTime">
                <el-date-picker
                  v-model="formData.signTime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  align="right"
                  type="date"
                  format="yyyy-MM-dd"
                  placeholder="选择日期"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="合同开始日期:" prop="contractStartTime">
                <el-date-picker
                  v-model="formData.contractStartTime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  align="right"
                  :picker-options="pickerOptions1"
                  type="date"
                  format="yyyy-MM-dd"
                  placeholder="选择日期"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="合同到期日期:" prop="contractEndTime">
                <el-date-picker
                  v-model="formData.contractEndTime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  align="right"
                  type="date"
                  format="yyyy-MM-dd"
                  placeholder="选择日期"
                  :picker-options="pickerOptions"
                  @focus="changeEndTime"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="备注:" size="mini" prop="remark">
                <el-input v-model="formData.remark" type="textarea" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button size="mini" @click="closeDialog">取 消</el-button>
          <el-button size="mini" type="primary" @click="handleSave">确 定</el-button>
        </span>
      </el-dialog>

    </div>
  </div>
</template>

<script>
import { getChangeLogData, saveChangeLog, queryUnitChangeRecords } from '@/api/constructionUnitMng'
import { getDictByPatchType } from '@/api/dataDict'
export default {
  name: 'ChangeLog',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    detailData: {
      type: [String, Object],
      default: ''
    }
  },
  data() {
    return {
      tableSelected: [],
      otherFilters: [],
      dlgVisible: false,
      pickerOptions1: { },
      tableData: [],
      pickerOptions: {},
      tableConfig: {
        // interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/constUnitChangeRecords/page`,
        hideSearchBar: true,
        setting: [
          {
            prop: 'signTime',
            label: '签约日期',
            formatData: this.$parseTimeYMD('signTime')
          },
          {
            prop: 'contractStartTime',
            label: '合同开始日期',
            formatData: this.$parseTimeYMD('contractStartTime')
          },
          {
            prop: 'contractEndTime',
            label: '合同到期日期',
            formatData: this.$parseTimeYMD('contractEndTime')
          },
          {
            prop: 'remark',
            label: '备注'
          }
        ],
        btnList: [{
          buttonName: '新增',
          optCode: 'add',
          outerFlag: true
        }]
      },
      formData: {
        contractEndTime: '',
        contractStartTime: '',
        id: '',
        remark: '',
        signSort: '',
        signTime: '',
        unitCode: ''
      },
      formRules: {
      }
    }
  },
  watch: {
    // detailData: {
    //   handler(v) {
    //     if (v && v.data) {
    //       this.otherFilters = [otherFiltersItem('unitCode', v.data.unitCode, '=')]
    //       this.$nextTick(() => {
    //         console.log('哈哈啊哈', this.otherFilters)
    //         this.$refs.refTable.initTableData()
    //       })
    //     }
    //   },
    //   deep: true,
    //   immediate: true
    // }
  },
  async created() {
    this.$set(this.formData, 'unitCode', this.detailData.data.unitCode)
    this.getData()
  },
  activated() {},
  methods: {
    getData() {
      queryUnitChangeRecords(this.detailData.data.unitCode).then(res => {
        if (res.success) {
          this.tableData = res.data.records
        }
      })
    },
    changeEndTime() {
      const that = this
      if (!that.formData.contractStartTime) {
        this.$message.warning('请先选择合同开始日期')
        return
      }
      this.pickerOptions = {
        disabledDate(time) {
          var nowTime = new Date(that.formData.contractStartTime)
          return time.getTime() < nowTime.getTime()
        }
      }
    },
    // 按钮组
    btnOperate(flag) {
      switch (flag) {
        case 'add':
          this.handleAdd()
          break
      }
    },
    handleAdd() {
      this.dlgVisible = true
    },
    closeDialog() {
      this.dlgVisible = false
      this.formData = {
        contractEndTime: '',
        contractStartTime: '',
        id: '',
        remark: '',
        signSort: '',
        signTime: '',
        unitCode: this.detailData.data.unitCode
      }
    },
    getEditData(id) {
      getChangeLogData(id).then(res => {
        if (res.success) {
          this.formData = res.data
        }
      })
    },
    // 获取数据字典
    async getDictByPatchTypeAll(data) {
      const obj = await getDictByPatchType(data)
        .then(res => {
          return res
        })
      return obj
    },
    handleSave() {
      this.$refs['refForm'].validate((valid) => {
        if (valid) {
          saveChangeLog(this.formData).then(res => {
            if (res.success) {
              this.$message.success('操作成功')
              this.getData()
              this.$refs.refTable.initTableData()
              this.closeDialog()
            }
          }).catch((res) => {
            this.$message.warning(res.msg)
          })
        }
      })
    },
    handleBack() {
      this.$emit('goBack')
    }
  }
}
</script>

<style lang="scss" scoped>
.top-btn-group{
  text-align: right;
  margin-bottom: 20px;
}
</style>
